﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Table</title>
	<link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all"/>
	<link rel="stylesheet" href="/static/css/global.css" media="all">
	<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/static/css/table.css"/>
</head>

<body>
<div class="admin-main">
	<blockquote class="layui-elem-quote">
		<a class="layui-btn layui-btn-small" href="./add.html">
			<i class="layui-icon">&#xe608;</i> 添加
		</a>
	</blockquote>

	<form action="" class="layui-form" method="post">
		<div class="layui-inline">
			<select name="env" asnycSelect="/admin/profile/options" lay-filter="env_select" lay-verify="required"
					onDataLoadCallback="onEnvSelectLoadFinish">
				<option value="">请选择环境</option>
			</select>
		</div>
		<div class="layui-inline">
			<select name="appId" asnycSelect="/admin/app/options" lay-filter="app_select"
					onDataLoadCallback="onAppSelectLoadFinish">
				<option value="">请选择应用</option>
			</select>
		</div>
		<div class="layui-inline">
			<select name="version" lay-verify="">
				<option value="">请选择版本</option>
				<option value="release">release</option>
			</select>
		</div>
		<div class="layui-inline">
			<input type="button" class="layui-btn J_search" lay-submit lay-filter="search" value="筛选"/>
		</div>
	</form>

	<fieldset class="layui-elem-field">
		<legend>配置列表</legend>
		<div class="layui-field-box layui-form">
			<table class="layui-table admin-table">
				<thead>
				<tr>
					<th>应用</th>
					<th>应用环境</th>
					<th>版本</th>
					<th>配置名称</th>
					<th>配置类型</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody id="content"></tbody>
			</table>
		</div>
	</fieldset>
</div>

<!--模板-->
<script type="text/html" id="list_tpl">
	{{# layui.each(d.data, function(index, item){ }}
	<tr>
		<td>{{ item.appName}}</td>
		<td>{{ item.env }}</td>
		<td>{{ item.version }}</td>
		<td>{{ item.name }}</td>
		<td>{{ item.type == 1 ? '配置文件' : (item.type == 2 ? '配置项' : 'JSON')}}</td>
		<td>
			<a href="javascript:void(0);" data-id="{{ item.id }}" class="layui-btn layui-btn-mini J_show_content">查看内容</a>
			<div id="content{{ item.id }}" style="display:none;">
				<textarea readonly="readonly" class="layui-textarea" style="margin:5px;height:520px;width:1000px;">{{item.contents}}</textarea>
			</div>
			<a href="./edit.html?dataloadurl=/admin/config/{{ item.id }}" class="layui-btn layui-btn-mini">编辑</a>
			<a href="javascript:void(0);" class="J_confirmurl layui-btn layui-btn-danger layui-btn-mini" act-url="/admin/config/delete/{{ item.id }}">删除</a>
		</td>
	</tr>
	{{# }); }}
</script>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/common.js?v20180106?a=91"></script>
<script type="text/javascript">
	layui.use(['layer', 'laytpl', 'form'], function () {
		var $ = layui.jquery, laytpl = layui.laytpl, form = layui.form();

		$("#content").on('click', ".J_show_content", function () {
			var contentId = "content" + $(this).attr('data-id');
			parent.layer.open({
				type: 1
				, title: false
				, closeBtn: false
				, area: ['1024px', '600px']
				, shade: 0.8
				, id: 'layer_' + contentId
				, btn: ['关闭']
				, moveType: 1
				, content: $('#' + contentId).html()
				, success: function (layero) {
					var btn = layero.find('.layui-layer-btn');
					btn.css('text-align', 'center');
				}
			});
		});

		form.on('submit(search)', function (data) {
			var loading = layer.load();
			var cookieValue = data.field.env + ":" + data.field.appId;
			setCookie('congfig_search', cookieValue);

			$.ajax({
				type: "POST",
				url: '/admin/config/list',
				dataType: "json",
				contentType: "application/json",
				data: JSON.stringify(data.field),
				complete: function () {
					layer.close(loading);
				},
				success: function (data) {
					if (data.success) {
						var tpl = $('#list_tpl').html();
						laytpl(tpl).render(data, function (html) {
							$("#content").html(html);
						});
					} else {
						layer.msg(data.msg, {
							icon: 5
						});
					}
				},
				error: function (xhr, type) {
					layer.msg('系统错误', {
						icon: 5
					});
				}
			});
			return false;
		});
	});

	function onEnvSelectLoadFinish(data) {
		var lastInput = getCookie('congfig_search');
		if (!lastInput) return;
		var def = lastInput.split(':')[0];
		for (var index in data) {
			data[index].selected = data[index].value == def;
		}
	}

	function onAppSelectLoadFinish(data) {
		var lastInput = getCookie('congfig_search');
		if (!lastInput || lastInput.split(':').length < 2) return;
		var def = lastInput.split(':')[1];

		for (var index in data) {
			data[index].selected = data[index].value == def;
		}
	}
</script>
</body>

</html>